@use '@angular/material' as mat;

@mixin layout-builder-color($theme) {
  $config: mat.m2-get-color-config($theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);

  .builder-list {
    .layout-builder {
      .layout-inner {
        > .layout {
          &:hover {
            outline: 1px dashed mat.m2-get-color-from-palette($primary);
            z-index: 10;
          }
          .layout-toolbar {
            .toggle {
              background-color: #272727;
              color: mat.m2-get-color-from-palette($primary, default-contrast, 0.8);
            }
            .actions {
              background-color: #333;
              @include mat.elevation(2, mat.m2-get-color-from-palette($background, tooltip), 0.25);
              .mat-mdc-button-base {
                color: mat.m2-get-color-from-palette($primary, default-contrast, 0.8);
              }
            }
          }
          .placeholder {
            color: rgba(0, 0, 0, 0.75);
            &:hover {
              color: mat.m2-get-color-from-palette($primary);
            }
          }
          .blocks {
            > .item {
              > .toolbar {
                background-color: #333;

                @include mat.elevation(
                  2,
                  mat.m2-get-color-from-palette($background, tooltip),
                  0.25
                );

                .mat-mdc-button-base,
                .title {
                  color: mat.m2-get-color-from-palette($primary, default-contrast, 0.8);
                }
                .title {
                  background: rgb(0 0 0 / 40%);
                }
              }
            }
          }
        }
      }
    }
  }

  .layout-toolbar-menu {
    background-color: mat.m2-get-color-from-palette($background, tooltip);
    .mat-mdc-menu-item,
    .mat-mdc-menu-item:visited,
    .mat-mdc-menu-item:link,
    .mat-mdc-menu-item .mat-icon-no-color,
    .mat-mdc-menu-item .mat-mdc-menu-submenu-icon {
      color: mat.m2-get-color-from-palette($primary, default-contrast);
    }
  }
}
